import React, {Component} from 'react'

const MusicItem = ({filename, id, play, pause, curSrc, delable, delMusic, status, src, select, selected}) => {
    return (
        <li className={selected && selected.id && id === selected.id ? 'selected-music' : null}>
            <span className="music-name" onClick={select}>
                {filename}
                {selected && selected.id && id === selected.id ? '(已选中)' : null}
            </span>
            { status === 'uploading'
                ? <button className="music-wp-play"><i className="am-icon-spinner am-icon-spin"></i></button>
                : [ curSrc !== undefined && src === curSrc
                    ? <button className="music-wp-play" key={1} onClick={pause}><i className="fa fa-pause" aria-hidden="true"></i></button>
                    : <button className="music-wp-play" key={3} onClick={ev => {ev.preventDefault(); play()}}><i className="fa fa-play-circle" aria-hidden="true"></i></button>,
                    delable ? <button type="button" className="music-wp-play" key={2} onClick={delMusic}><i className="fa fa-times" aria-hidden="true"></i></button> : null
                ]
            }
        </li>   
    )
}

export default MusicItem